.popup-flex__container {
  --popup-flex-container-height: 0vh;
  --popup-flex-container-height-max: 90vh;
  --popup-flex-container-height-min: 15vh;

}

.popup-flex {
  &__container {
    box-sizing: border-box;
    width: 100%;
    height: var(--popup-flex-container-height);
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    overflow: hidden;
    position: absolute;
    z-index: 161;
    bottom: 0;
    transition: height .3s;

    &.ceil {
      height: var(--popup-flex-container-height-max)
    }

    &.middle {
      --popup-flex-container-height: 50vh
    }

    &.floor {
      height: var(--popup-flex-container-height-min);
    }

  }

  &__line {
    height: 10rpx;
    width: 150rpx;
    background-color: #f0f0f0;
    border-radius: 4rpx;
    margin: 20rpx auto 0;
    flex-shrink: 0;
  }

  &__content {
    padding: 20rpx;
  }
}

.popup-flex__container.ceil {
  .popup-flex__content {
    overflow-y: scroll;
    height: calc(90vh - 40rpx);
  }
}